<template>
	<view class="page">
		<u-navbar  back-icon-color="#fff" :back-text-style="{color:'#fff'}"  :border-bottom="false" :is-back="true" back-text="雷电预警" :background="{ background:'#357BED'}"></u-navbar>
		
		<view class="select">
			<u-dropdown active-color="#357BED">
				<u-dropdown-item v-model="value3" @change="change" :title="title" :options="options3"></u-dropdown-item>
			</u-dropdown>
		</view>
		
		<view v-if="total > 0" class="list">
			<view v-for="(item,index) in list" :key="item.ID" class="item">
				<view class="body">
					<view class="title u-border-bottom">
						<text>{{item.Location}}</text>
					</view>
					<view class="infor u-flex u-flex-1 u-row-between u-row-center">
						<view class="infor-2">
							<text>{{item.Cq}}</text>
							<text>场强 </text>
						</view>
						<view class="infor-2">
							<text>{{item.Ljyj}}</text>
							<text>雷击预警值</text>
						</view>
					</view>
				</view>
				<view class="footer u-flex u-row-center u-row-between">
					<text>{{item.CreateTime}}</text>
				</view>
			</view>
			<u-loadmore :status="status" icon-type="flower" bg-color="transperant"   margin-top="30" margin-bottom="30"/>
		</view>
		<u-empty margin-top="160" :show="total == 0" text="暂无数据" mode="list"></u-empty>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			list: [],
			userInfo: {},
			pageIndex: 1,
			pageSize: 5,
			status: 'loadmore',
			tableIndex: 'ljyj',
			total: -1,
			options3: [],
			value3:'',
			title:'单位区域'
		} 
	},
	methods: {
		change(e){
			for (let s of this.options3) {
				if(s.value==e){
					this.title=s.label
				}
			}
			this.total = 0
			this.pageIndex=1
			this.list = []
			this.userInfo.regionid=e
			this.getList()
		},
		getRegion() {
			this.$axios.post('Region/XGetRegion',this.userInfo, p => {
				p.data.map(item => {
					this.options3.push({
						label: item.RegionTitle,
						value: item.ID
					})
				})
			})
		},
		async getList() {
			this.status = "loading";
			this.$axios.post('SJL/XQuery',{...this.userInfo,tableIndex: this.tableIndex,pageSize: this.pageSize,pageIndex: this.pageIndex}, p => {
				if (p.code == 0){
					this.total = p.count
					this.list = this.list.concat(p.data);
					 if (this.list.length >= p.count) {
						this.status = "nomore"
					 } else {
						this.pageIndex += 1;
						this.status = "loadmore"
					 }
				}else{
					this.total = 0
					this.pageIndex=1
					this.list = []
				}
				 uni.stopPullDownRefresh();
			})
		}
	},
	onLoad() {
		this.userInfo=this.$util.getUserInfo()
		this.getList();
		this.getRegion();
	},
	onPullDownRefresh() {
		this.pageIndex = 1;
		this.list = [];
		this.getList()
	},
	onReachBottom() {
		if (this.status == 'loading' || this.status == 'nomore') {
			return;
		}
		this.getList()
	}
};
</script>

<style scoped lang="scss">
	.select {
		padding: 10rpx 0;
		background-color: white;
		// margin-top: 20rpx;
		// position: sticky;
		// top: 136rpx;
	}
	.page {
		background: rgb(244,244,244);
		min-height: 100vh;
	}
	.list {
		padding: 14rpx 0;
	}
	
	.item {
		background-color: #fff;
		font-size: 32rpx;
		color: #252525;
		padding: 48rpx 40rpx 36rpx;
		margin-bottom: 14rpx;
		
		.body {
			flex: 1;
			padding-bottom: 10rpx;
			.title {
				font-size: 27rpx;
				padding-bottom: 25rpx;
				flex: 1;
			}
			.infor {
				flex: 1;
				.infor-2 {
					flex: 1;
					margin: 20rpx 0;
					padding: 10rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-right: 1rpx solid #E4E7ED;
					font-size: 28rpx;
					text:nth-of-type(1) {
						font-weight: bold;
					}
				}
				.infor-2:nth-last-of-type(1) {
					border: none;
				}
			}
		}
		.footer {
			font-size: 24rpx;
			color: #8b8b8b;
			
		}
		
	}
		
	
</style>